<!-- 电表详情 -->
<template>
  <div
    class="echart"
    id="waterEcharts"
    :style="myChartStyle"
    ref="chartRef"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "waterEcharts",
  components: {},
  data() {
    return {
      xData: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'], //横坐标
      yData: [50, 70, 90, 70, 60, 40, 30, 70, 90, 70, 60], //数据
      myChartStyle: { float: "left", width: "100%", height: "144px",marginTop:'10px' }, //图表样式
    };
  },
  computed: {},
  created() {},
  watch: {},
  mounted() {
    this.getMonth();
    this.initEcharts();
  },
  updated() {
    this.checkChartRef();
  },
  methods: {
    checkChartRef() {
      const chartRef = this.$refs.chartRef;
      if (chartRef) {
        console.log("chartRef has value:", chartRef);
        // 进行相关操作
      } else {
        console.log("chartRef is null");
      }
    },
    getMonth() {
      // const days = 24;
      // let xData = [];
      // let yData = [];
      // for (let index = 1; index <= days; index++) {
      //   xData.push(index + "年");
      //   yData.push(parseInt(index * Math.random() * 10000));
      // }
      // this.xData = xData;
      // this.yData = yData;
      // console.log(days);
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        title: {
          text: "总量(m³)",
          // left: "center",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
            fontSize: 12,
          },
        },
        grid:{
          left: "7%",
          right: "1%",
          bottom: "25px",
          top: "30px"
        },
        xAxis: {
          data: this.xData,
          axisLabel: {
              show: true, // 显示标签
              // position: 'top', // 标签位置
              color:"rgba(255,255,255,0.8)",
              rotate: 20, // 文字倾斜角度，单位为度
              fontSize: 12, // 标签文字大小
              formatter: function (params) {
                // console.log(params);
                return params + '年';
              },
            },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#33375c', // 分割线颜色
              width: 1, // 分割线宽度
              type: 'solid' // 分割线类型
            }
          },
          axisLabel: {
            show: true, // 显示标签
            color:"rgba(255,255,255,0.8)"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var tar = params[0];
            return tar.name + " : " + tar.value + "m³";
            // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value
          },
        },
        dataZoom:[
        {
          type: 'inside', // 内置型缩放
          start: 0, // 初始缩放范围起点（百分比）
          end: 100 // 初始缩放范围终点（百分比）
        },
        ],
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0,  color: '#00a0a7' }, // 起始颜色（浅蓝色）
                { offset: 1, color: '#0084c1'}  // 结束颜色（深蓝色）
              ])
            },
            barWidth: 15,
          },
          {
            type: "line", //形状为柱状图
            data: this.yData,
            itemStyle: {
              color: '#917b0d'
            },
            barWidth: 15,
            smooth: true, // 设置为 true 启用平滑效果
            lineStyle: {
              width: 2, // 线条宽度
              color: '#917b0d' // 线条颜色
            }
          },
        ],
      };
      const chartRef = this.$refs.chartRef;
      if (chartRef) {
        // 获取 div 的高度
        const divHeight = chartRef.offsetHeight;
        console.log("chartRef", divHeight);
      }
      const myChart = echarts.init(document.getElementById("waterEcharts"));
      // const myChart = echarts.init(document.getElementById("waterEcharts"),{
      //     width: width,
      //     height: h ? h : height,
      //   })
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped></style>
